<template>
	<view>
		<!-- 聊天列表 -->
		<view class="user-chat-list u-f user-chat-me">
			<!-- <image src="/static/demo/userpic/10.jpg" mode="widthFix" lazy-load></image> -->
			<view class="user-chat-list-body">
				<!-- 文字 -->
				<!-- <text>随便随便随便随便随便随便随便随便随便随便随便随便随便随便</text> -->
				<!-- 图片 -->
				<image src="/static/demo/3.jpg" mode="widthFix" lazy-load></image>
			</view>
			<image src="/static/demo/userpic/10.jpg" mode="widthFix" lazy-load></image>
			
		</view>
		<!-- 输入框 -->
		<user-chat-bottom @submit='handleSendMessageClick'/>
	</view>
</template>

<script>
	import UserChatBottom from '../../components/user-chat/user-chat-bottom.vue'
	export default {
		components:{
			UserChatBottom
		},
		data() {
			return {
				
			}
		},
		methods: {
			handleSendMessageClick(text) {
				console.log(text)
			}
		}
	}
</script>

<style scoped>
.user-chat-list {
	
}
	.user-chat-list>image {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		flex-shrink: 0;
	}
.user-chat-list-body{
	position: relative;
	background-color: #F4F4F4;
	padding: 25upx;
	margin-left: 20upx;
	border-radius: 20upx;
	margin-right: 100upx;
}

.user-chat-list-body> image {
	max-width: 150upx;
	max-height: 200upx;
}

.user-chat-list-body::after{
	position: absolute;
	content: '';
	left: -30upx;
	right: 0;
	top: 30upx;
	width: 0;
	height: 0;
	border: 16upx solid transparent;
	border-right-color: #F4F4F4;
}
.user-chat-me {
	justify-content: flex-end;
}

.user-chat-me .user-chat-list-body {
	margin-right: 20upx;
	margin-left: 100upx;
	
}

.user-chat-me .user-chat-list-body::after{
	position: absolute;
	content: '';
	left: auto;
	right: -30upx;
	top: 30upx;
	width: 0;
	height: 0;
	border: 16upx solid transparent;
	border-left-color: #F4F4F4;
}
</style>
